<template>
  <div>
    <a-button @click="openAdd">添加</a-button>
    <a-table
      :columns="columns"
      :row-selection="rowSelection"
      :rowKey="`menuId`"
      :data-source="treeList"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'id'">
          <a-button type="primary" @click="openEdit(record)">修改</a-button>
          <a-popconfirm
            @confirm="sureDeleted(record.menuId)"
            title="是否要删除该节点"
          >
            <a-button type="primary" danger> 删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <a-modal
      v-model:visible="editVisible"
      title="修改"
      :footer="null"
      :maskClosable="false"
      :afterClose="resetForm"
    >
      <a-form
        ref="editFormRef"
        :model="menuForm"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          label="菜单名称"
          name="name"
          :rules="[{ required: true, message: '菜单名称不能为空' }]"
        >
          <a-input v-model:value="menuForm.name" />
        </a-form-item>

        <a-form-item
          label="菜单类型"
          name="type"
          :rules="[{ required: true, message: '菜单类型不能为空' }]"
        >
          <a-radio-group
            v-model:value="menuForm.type"
            :options="menuTypeOptions"
          />
        </a-form-item>
        <a-form-item label="url" name="url">
          <a-input v-model:value="menuForm.url" />
        </a-form-item>
        <a-form-item label="权限标识" name="perms">
          <a-input v-model:value="menuForm.perms" />
        </a-form-item>
        <a-form-item label="请求方法" name="method">
          <a-select ref="select" v-model:value="menuForm.method">
            <a-select-option value="GET">GET</a-select-option>
            <a-select-option value="POST">POST</a-select-option>
            <a-select-option value="DELETE">DELETE</a-select-option>
            <a-select-option value="PUT">PUT</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="图标" name="icon">
          <icon-picker search="" v-model:activeName="menuForm.icon" />
        </a-form-item>
        <a-form-item
          label="排序号"
          name="orderNum"
          :rules="[
            {
              required: true,
              message: '排序号不能为空',
            },
          ]"
        >
          <a-input v-model:value="menuForm.orderNum" :default-value="0" />
        </a-form-item>

        <a-form-item label="上级地区" name="parentIds">
          <a-cascader
            v-model:value="parentIds"
            :options="treeList"
            :field-names="{
              label: 'name',
              value: 'menuId',
              children: 'children',
            }"
            placeholder="请选择上级菜单"
            :changeOnSelect="true"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" @click="edit" html-type="submit"
            >确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="addVisible"
      title="添加"
      :footer="null"
      :maskClosable="false"
      :afterClose="resetForm"
    >
      <a-form
        ref="addFormRef"
        :model="menuForm"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          label="菜单名称"
          name="name"
          :rules="[{ required: true, message: '菜单名称不能为空' }]"
        >
          <a-input v-model:value="menuForm.name" />
        </a-form-item>

        <a-form-item
          label="菜单类型"
          name="type"
          :rules="[{ required: true, message: '菜单类型不能为空' }]"
        >
          <a-radio-group
            v-model:value="menuForm.type"
            :options="menuTypeOptions"
          />
        </a-form-item>
        <a-form-item label="url" name="url">
          <a-input v-model:value="menuForm.url" />
        </a-form-item>
        <a-form-item label="权限标识" name="perms">
          <a-input v-model:value="menuForm.perms" />
        </a-form-item>
        <a-form-item label="请求方法" name="method">
          <a-input v-model:value="menuForm.method" />
          <a-select ref="select" v-model:value="menuForm.method">
            <a-select-option value="GET">GET</a-select-option>
            <a-select-option value="GET">GET</a-select-option>
            <a-select-option value="DELETE">DELETE</a-select-option>
            <a-select-option value="PUT">PUT</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="图标" name="icon">
          <icon-picker search="" v-model:activeName="menuForm.icon" />
        </a-form-item>
        <a-form-item
          label="排序号"
          name="orderNum"
          :rules="[
            {
              required: true,
              message: '排序号不能为空',
            },
          ]"
        >
          <a-input v-model:value="menuForm.orderNum" :default-value="0" />
        </a-form-item>

        <a-form-item label="上级地区" name="parentIds">
          <a-cascader
            v-model:value="parentIds"
            :options="treeList"
            :field-names="{
              label: 'name',
              value: 'menuId',
              children: 'children',
            }"
            placeholder="请选择上级菜单"
            :changeOnSelect="true"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" @click="add" html-type="submit"
            >确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="tsx">
import { MenuDto, type MenuVo } from "@/api";
import { Client } from "@/api/clientApi";
import IconPicker from "@/component/iconPicker/iconPicker.vue";
import { Icon } from "@iconify/vue";
import { Button, message, Tag } from "ant-design-vue";
import "ant-design-vue/es/message/style/css";
import { h, onMounted, reactive, ref } from "vue";
const columns = [
  {
    title: "菜单名称",
    dataIndex: "name",
  },
  {
    title: "url",
    dataIndex: "url",
  },
  {
    title: "权限标识",
    dataIndex: "perms",
  },
  {
    title: "菜单类型",
    dataIndex: "type",
    customRender: ({ text, record, index, column }) => {
      switch (text) {
        case 0:
          return <Tag color="#2db7f5">目录</Tag>;
        case 1:
          return <Tag color="#2db2f5">菜单</Tag>;
        case 2:
          return <Tag color="#87d068">按钮</Tag>;
      }
    },
  },
  {
    title: "图标",
    dataIndex: "icon",
    customRender: ({ text }) => {
      return <Icon icon={text} />;
      // return h(
      //   Icon,
      //   {
      //     icon: text,
      //   },
      //   { default: () => {} }
      // );
    },
  },
  {
    title: "排序号",
    dataIndex: "orderNum",
  },
  {
    title: "操作",
    key: "id",
    // customRender: ({ record }) => (
    //   <div>
    //     <Button type="primary" onClick={() => openEdit(record)}>
    //       修改
    //     </Button>
    //     <a-popconfirm
    //       title={"是否要删除该节点"}
    //       confirm={() => sureDeleted}
    //       cancel={() => {}}
    //     >
    //       <a type="primary" danger>
    //         删除
    //       </a>
    //     </a-popconfirm>
    //   </div>
    // ),
  },
];

const menuTypeOptions = [
  { label: "目录", value: 0 },
  { label: "菜单", value: 1 },
  { label: "按钮", value: 2 },
];
const parentIds = ref<number[]>([]);
const menuForm = reactive<MenuDto>({
  menuId: null,
  parentId: 0,
  name: "",
  type: 0,
  icon: "",
  orderNum: 0,
});

const editFormRef = ref();
/**
 * 修改弹窗的显示变量
 */
const editVisible = ref<boolean>(false);
/**
 * 打开修改弹窗
 * @param record
 */
const openEdit = async (record: any) => {
  editVisible.value = true;
  const rest = await Client.systemMenu.getSysMenu(record.menuId);
  menuForm.menuId = rest.menuId;
  menuForm.parentId = rest.parentId;
  menuForm.url = rest.url;
  menuForm.type = rest.type;
  menuForm.name = rest.name;
  menuForm.icon = rest.icon;
  menuForm.orderNum = rest.orderNum;
  menuForm.perms = rest.perms;
  menuForm.method = rest.method;
};
/**
 * 提交更新
 */
const edit = () => {
  if (parentIds.value?.length > 0) {
    menuForm.parentId = parentIds.value[parentIds.value.length - 1];
  }
  Client.systemMenu.putSysMenu(menuForm).then(() => {
    editVisible.value = false;
    getMenuTree();
    message.success("修改成功");
  });
};

const addVisible = ref<boolean>(false);
const openAdd = () => {
  addVisible.value = true;
};
const add = () => {
  if (parentIds.value?.length > 0) {
    menuForm.parentId = parentIds.value[parentIds.value.length - 1];
  }
  Client.systemMenu.postSysMenu(menuForm).then(() => {
    addVisible.value = false;
    getMenuTree();
    message.success("添加成功");
  });
};

const sureDeleted = (id: number) => {
  Client.systemMenu.deleteSysMenu(id).then(() => {
    message.success("删除成功");
    getMenuTree();
  });
};

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: MenuVo[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record: MenuVo, selected: boolean, selectedRows: MenuVo[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: MenuVo[],
    changeRows: MenuVo[]
  ) => {
    console.log(selected, selectedRows, changeRows);
  },
});

const treeList = ref<MenuVo[]>([]);
const getMenuTree = async () => {
  treeList.value = await Client.systemMenu.getSysMenuMenuTree();
};
/**
 * 重置表单对象
 */
const resetForm = () => {
  menuForm.menuId = null;
  menuForm.parentId = 0;
  menuForm.type = 0;
  menuForm.name = "";
  menuForm.icon = "";
  menuForm.orderNum = 0;
  menuForm.method = undefined;
  parentIds.value = [];
};
onMounted(() => {
  getMenuTree();
});
</script>

<style scoped></style>
